import React, { useState } from "react";
import { Card, Row, Col } from "antd";
import ReactEcharts from "echarts-for-react";
const HomePage = (props) => {
  const [sales, setSales] = useState([5, 20, 36, 10, 10, 20, 158]);
  const [stores, setStores] = useState([15, 120, 36, 110, 110, 20, 50]);
  const [ccc, setccc] = useState([150, 105, 30, 64, 85, 154, 36]);
  const [Visual, setVisual] = useState([130, 148, 60, 64, 59, 160, 180]);
  const [cc3, setcc3] = useState([140, 50, 80, 64, 25, 184, 180]);
  const [Javascript, setJavascript] = useState([
    160, 60, 180, 64, 45, 134, 180,
  ]);
  const [PHP, setPHP] = useState([170, 80, 160, 94, 75, 144, 80]);
  const [Python, setPython] = useState([170, 80, 160, 94, 75, 144, 80]);
  // 配置对象
  const getOption = (sal, sto) => {
    return {
      tooltip: {},
      legend: {
        data: [
          "Java",
          "C",
          "C++",
          "Python",
          "Visual Basic NET",
          "C#",
          "Javascript",
          "PHP",
          "SQL",
          "Objective-C",
        ],
      },
      xAxis: {
        data: ["1989", "1994", "1999", "2004", "2009", "2014", "2019"],
      },
      yAxis: {},
      series: [
        {
          name: "Java",
          type: "line",
          data: sales,
        },
        {
          name: "C",
          type: "line",
          data: stores,
        },
        {
          name: "C++",
          type: "line",
          data: ccc,
        },
        {
          name: "Python",
          type: "line",
          data: Python,
        },
        {
          name: "Visual Basic NET",
          type: "line",
          data: Visual,
        },
        {
          name: "C#",
          type: "line",
          data: cc3,
        },
        {
          name: "Javascript",
          type: "line",
          data: Javascript,
        },
        {
          name: "PHP",
          type: "line",
          data: PHP,
        },
        {
          name: "SQL",
          type: "line",
          data: stores,
        },
        {
          name: "Objective-C",
          type: "bar",
          data: stores,
        },
      ],
      legend: {
        textStyle: {
          fontSize: 13,
          color: "#FFFFFF",
        },
      },
    };
  };

  return (
    <div id="zhexian">
      <Row gutter={14}>
        <Col span={12} Col={18} style={{ marginTop: "30px" }}>
          <ReactEcharts option={getOption(sales, stores, ccc, Visual)} />
        </Col>
      </Row>
    </div>
  );
};

export default HomePage;
